<template>
  <div class="container">
    <div class="map-header" @click="clickMapHeader">
      <div class="map-header-title">影视产业大脑+未来影视工厂</div>
      <!--<div class="map-header-subtitle">实现全产业链信息化、数字化、工业化，推动六大高地建设，塑造数字化产业生态</div>-->

      <div class="icon-box icon-left" v-if="indexDataShow">
        <div class="item" v-for="(item, i) in indexData.left" :key="i">
          <div class="icon"><i :class="`iconfont ${item.icon}`"></i></div>
          <div class="_inner">
            <div class="name">{{item.name}}</div>
            <div class="_info"><span class="num"><countTo :startVal='0' :endVal='item.num' :duration='3000'></countTo></span><span class="unit">{{item.unit}}</span></div>
          </div>
        </div>
      </div>

      <div class="icon-box icon-right" v-if="indexDataShow">
        <div class="item" v-for="(item, i) in indexData.right" :key="i">
          <div class="icon"><i :class="`iconfont ${item.icon}`"></i></div>
          <div class="_inner">
            <div class="name">{{item.name}}</div>
            <div class="_info"><span class="num"><countTo :startVal='0' :endVal='item.num' :duration='3000'></countTo></span><span class="unit">{{item.unit}}</span></div>
          </div>
        </div>
      </div>

    </div>
    <div id="map" :style="{height: `${mapHeight}px`}">
      <!--<el-amap-->
      <!--    view-mode="3D"-->
      <!--    :pitch="pitch"-->
      <!--    :show-label="false"-->
      <!--    :center="center"-->
      <!--    :zoom="zoom"-->
      <!--    @click="clickMap"-->
      <!--    @init="initMap"-->
      <!--&gt;-->
      <!--  <el-amap-loca @init="initLoca">-->
      <!--    <el-amap-loca-pulse-link-->
      <!--        :visible="visible"-->
      <!--        :source-url="sourceUrl"-->
      <!--        :layer-style="layerStyle"-->
      <!--        :visible-duration="500"-->
      <!--    />-->
      <!--  </el-amap-loca>-->
      <!--</el-amap>-->

      <div class="map-desc">
        挖掘政府、行业、企业等数据资源，<br/>助力企业创新变革、影视生态优化、政府精准服务。
      </div>
      <div class="flyline-chart">
        <dv-flyline-chart-enhanced :config="mapConfig"  style="width:100%;height:100%;" />
        <div class="icon-box icon-left" v-if="!indexDataShow">
          <div class="item" v-for="(item, i) in indexData.left" :key="i">
            <div class="icon"><i :class="`iconfont ${item.icon}`"></i></div>
            <div class="_inner">
              <div class="name">{{item.name}}</div>
              <div class="_info"><span class="num">{{item.num}}</span><span class="unit">{{item.unit}}</span></div>
            </div>
          </div>
        </div>

        <div class="icon-box icon-right" v-if="!indexDataShow">
          <div class="item" v-for="(item, i) in indexData.right" :key="i">
            <div class="icon"><i :class="`iconfont ${item.icon}`"></i></div>
            <div class="_inner">
              <div class="name">{{item.name}}</div>
              <div class="_info"><span class="num">{{item.num}}</span><span class="unit">{{item.unit}}</span></div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import {defineComponent} from "vue";
import countTo from '@/components/count-to';
export default defineComponent({
  name: "Map",
  components: { countTo },
  data() {
    return {
      mapHeight: 0,
      center: [109.595668,35.447184],
      zoom: 5,
      pitch: 55,
      visible: true,
      sourceUrl: 'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=100000_full',
      layerStyle: {
        unit: 'meter',
        dash: [40000, 0, 40000, 0],
        lineWidth () {
          return [20000, 1000];
        },
        height (feat) {
          return feat.distance / 3 + 10;
        },
        // altitude: 1000,
        smoothSteps: 30,
        speed () {
          return 1000 + Math.random() * 200000;
        },
        flowLength: 100000,
        lineColors () {
          return ['rgb(255,228,105)', 'rgb(255,164,105)', 'rgba(1, 34, 249,1)'];
        },
        maxHeightScale: 0.3, // 弧顶位置比例
        headColor: 'rgba(255, 255, 0, 1)',
        trailColor: 'rgba(255, 255,0,0)',
      },
      config: {
        halo: {
          show: true,
          radius: 35
        },
        points: [
          {
            name: '东阳',
            coordinate: [0.68, 0.64],
            icon: {
              src: require('../../assets/img/home/home-map-location.png'),
              width: 80,
              height: 80
            },
          },
          {
            name: '辽宁',
            coordinate: [0.70, 0.33]
          },
          {
            name: '黑龙江',
            coordinate: [0.75, 0.19]
          },
          {
            name: '新疆',
            coordinate: [0.35, 0.29]
          },
          {
            name: '青海',
            coordinate: [0.43, 0.49]
          },
          {
            name: '陕西',
            coordinate: [0.56, 0.51]
          },
          {
            name: '河南',
            coordinate: [0.61, 0.51]
          },
          {
            name: '云南',
            coordinate: [0.50, 0.78]
          },
          {
            name: '湖南',
            coordinate: [0.60, 0.68]
          },
          {
            name: '江西',
            coordinate: [0.63, 0.67]
          },
          {
            name: '广东',
            coordinate: [0.61, 0.78]
          },
        ],
        lines: [
          {
            source: '辽宁',
            target: '东阳'
          },
          {
            source: '黑龙江',
            target: '东阳'
          },
          {
            source: '新疆',
            target: '东阳'
          },
          {
            source: '青海',
            target: '东阳'
          },
          {
            source: '陕西',
            target: '东阳'
          },
          {
            source: '河南',
            target: '东阳'
          },
          {
            source: '云南',
            target: '东阳'
          },
          {
            source: '湖南',
            target: '东阳'
          },
          {
            source: '江西',
            target: '东阳'
          },
          {
            source: '广东',
            target: '东阳'
          },
        ],
        icon: {
          show: true,
          src: require('../../assets/img/home/home-map-location.png'),
          width: 80,
          height: 80
        },
        text: {
          show: false,
        },
        line: {
          width: 2,
          radius: 200
        },
        curvature: 4,
        bgImgSrc: require('../../assets/img/home/home-map-bg.png')
      },
      mapConfig: {},
      indexDataShow: true,
      indexData: {
        left: [
          { icon: 'icon-shuju', name: '产业数据量', num: 144578921, unit: '条' },
          { icon: 'icon-fangwenliang', name: '访问量', num: 3211262, unit: '次' },
          { icon: 'icon-yonghuming', name: '用户数', num: 140929, unit: '人' }
        ],
        right: [
          { icon: 'icon-qiye', name: '服务企业数', num: 1590, unit: '家' },
          { icon: 'icon-dianyingshipin', name: '服务剧组数', num: 414, unit: '家' },
          { icon: 'icon-chuangyejidi', name: '覆盖基地数', num: 228, unit: '座' }
        ]
      }
    }
  },
  methods: {
    clickMapHeader(){
      this.mapHeight = this.mapHeight ? 0 : 560
      this.indexDataShow = !this.indexDataShow
      setTimeout(()=>{
        this.mapConfig = {...this.config }
      }, 200)
    },
    clickMap(e) {
      console.log('click map: ', e);
    },
    initMap(e) {
      console.log('init map: ', e);
    },
    changeVisible() {
      this.visible = !this.visible;
    },
    initLoca(loca){
      loca.animate.start();
    }
  }
})
</script>

<style scoped lang="less">
.container {
  background: url("../../assets/img/home/home-map-jx.png") no-repeat center / 100% 100%;
  .icon-box {
    position: absolute;
    .item {
      display: flex; align-items: center;  justify-content: center;
      .icon {
        background-image: linear-gradient(135deg, #EED7B7 0%, #B8946E 100%);
        width: 38px; height: 38px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center;
        position: relative;
        &:before {
          content: ''; display: block; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #EED7B7;
          position: absolute; left: -3px; top: -3px;
        }
        i { font-size: 18px;}
      }
      ._inner {
        text-align: left ; padding-left: 10px;
        /*width: calc( 100% - 50px );*/
        ._info {
          display: flex; align-items: flex-end;
        }
        .num { font-size: 22px; color: #cb914d; }
        .unit { padding-bottom: 5px;}
      }
    }
  }

  .map-header {
    padding: 30px 0 30px;
    text-align: center; cursor: pointer; position: relative;

    .map-header-title {
      /*margin-bottom: 15px;*/
      font-size: 32px;
      font-weight: bold;
      color: #313233;
      line-height: 38px;
    }

    .map-header-subtitle {
      font-size: 18px;
      color: #313233;
      line-height: 22px;
    }
    .icon-box {
      width: calc( (100% - 410px) / 2 ); min-width: 500px;
      top: 30px; display: flex; align-items: center; justify-content: center;
      .item {
        padding: 0 15px;
      }
    }
    .icon-left { left: 0; }
    .icon-right {
      right: 0;
      .item {
        padding: 0 20px;
      }
    }
  }
  #map {
    height: 560px;
    transition: all .3s; overflow: hidden;
    .map-desc {
      width: 1200px; margin: auto; font-size: 16px; padding-bottom: 16px;
      text-align: center;
      text-indent: 2em;
    }
    .flyline-chart {
      width: 1257px; height: 500px; margin: auto; position: relative;
      .icon-box {
        width: 200px; top: 60px;
        .item { padding: 30px 0; justify-content: left;}
      }
      .icon-left { left: 0; }
      .icon-right { right: 0; }
    }
  }
}

</style>
